<template>
  <detail-page
    title="已结算详情"
    :description="headerDescription"
    :loading="config.loading"
    @close="close"
  >
    <abstract-form>
      <!--工作小结-->
      <collapse-card header="工作小结">
        <abstract-form-item label="文件">
          <file :file="info.file" :file-name="info.fileName" />
        </abstract-form-item>
        <abstract-form-item label="添加时间">
          {{ info.addTime }}
        </abstract-form-item>
      </collapse-card>
      <!--小的合计-->
      <collapse-card header="小的合计">
        <abstract-table :data="info.smallTotal">
          <el-table-column
            align="center"
            label="#"
            prop="type_title"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人数"
            prop="scoringTimes"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="总分数"
            prop="score"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="均分"
            prop="averageScore"
            show-overflow-tooltip
          />
        </abstract-table>
      </collapse-card>
      <!--上级打分信息-->
      <collapse-card header="上级打分信息">
        <abstract-table :data="info.supInfo">
          <el-table-column
            align="center"
            label="打分人姓名"
            prop="scorer_name"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人电话"
            prop="scorer_tel"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人岗位"
            prop="scorer_orgPost_title"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="操作" width="150px">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="small"
                @click="toScoringDetailsDetail(row)"
                >打分明细详情</el-button
              >
            </template>
          </el-table-column>
        </abstract-table>
      </collapse-card>
      <!--平级打分信息-->
      <collapse-card header="平级打分信息">
        <abstract-table :data="info.gradingInfo">
          <el-table-column
            align="center"
            label="打分人姓名"
            prop="scorer_name"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人电话"
            prop="scorer_tel"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人岗位"
            prop="scorer_orgPost_title"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="操作" width="150px">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="small"
                @click="toScoringDetailsDetail(row)"
                >打分明细详情</el-button
              >
            </template>
          </el-table-column>
        </abstract-table></collapse-card
      >
      <!--组内互评打分信息-->
      <collapse-card header="组内互评打分信息">
        <abstract-table :data="info.groupInfo">
          <el-table-column
            align="center"
            label="打分人姓名"
            prop="scorer_name"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人电话"
            prop="scorer_tel"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="打分人岗位"
            prop="scorer_orgPost_title"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="操作" width="150px">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="small"
                @click="toScoringDetailsDetail(row)"
                >打分明细详情</el-button
              >
            </template>
          </el-table-column>
        </abstract-table></collapse-card
      >
    </abstract-form>
  </detail-page>
</template>

<script>
import DetailPage from '@/views/_common/DetailPage'
import AbstractTable from '@/components/abstract/Table'
import CollapseCard from '@/components/CollapseCard'
import AbstractForm from '@/components/abstract/Form'
import AbstractFormItem from '@/components/abstract/Form/item'
import File from '@/components/File'
import { closeCurrentPage } from '@/utils/route'
import { request } from '../../../../api/request'

export default {
  name: 'NeedToScoreMark',

  components: {
    DetailPage,
    AbstractTable,
    CollapseCard,
    AbstractForm,
    AbstractFormItem,
    File
  },

  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },

  data() {
    return {
      config: {
        loading: false
      },
      info: {
        users_name: null,
        users_tel: null,
        orgPost_title: null,
        file: null,
        fileName: null,
        addTime: null,
        score: null,
        supInfo: [],
        smallTotal: [],
        gradingInfo: [],
        groupInfo: []
      },
      activeName: '0',
      form: {
        postDetail: []
      },
      tableData: [],
      options: [
        {
          label: '认真负责 - 2分',
          value: 0
        },
        {
          label: '细心 - 2分',
          value: 1
        }
      ]
    }
  },

  computed: {
    headerDescription() {
      return [
        {
          label: '姓名：',
          content: this.info.users_name
        },
        {
          label: '电话：',
          content: this.info.users_tel
        },
        {
          label: '岗位：',
          content: this.info.orgPost_title
        },
        {
          label: '总分：',
          content: this.info.score
        }
      ]
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    getFileName(file) {
      let fileS = file.split('/')
      return fileS[fileS.length - 1]
    },

    toScoringDetailsDetail(row) {
      this.$router.push(
        `/groupManage/workSum/scoreResults/detail/${this.id}/scoringDetailsDetail/${row.id}`
      )
    },

    //获取列表页的地址
    getTablePageUrl() {
      const url = this.$route.path
      const i = url.indexOf('/detail')
      const tablePageUrl = url.substring(0, i)
      return [...tablePageUrl].join('')
    },

    //关闭页面并跳转到列表页
    close() {
      return closeCurrentPage(this.getTablePageUrl())
    },

    commit() {},

    init() {
      this.config.loading = true
      request(
        'company/workSum/scoringResult/scoredDetails',
        { id: this.id },
        (res) => {
          this.info = res.data
        }
      ).finally(() => (this.config.loading = false))
    }
  }
}
</script>
